<template>
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-position="right">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="版位">
                            <el-select v-model="searchForm.position" placeholder="请选择版位" clearable :style="selectWidth">
                                <el-option label="企业产品横幅广告" value="0" />
                                <el-option label="首页横幅" value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="状态">
                            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable :style="selectWidth">
                                <el-option label="草稿" value="0" />
                                <el-option label="待审核" value="1" />
                                <el-option label="已审核" value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-button type="primary" @click="onSearch"><el-icon><Search /></el-icon>搜索</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <!-- 表格部分 -->
        <el-card style="margin-top:10px">
            <div style="margin-bottom:5px">
                <el-button type="primary" plain size="small" @click="onAdd"><el-icon ><DocumentAdd/></el-icon>添加</el-button>
                <el-button type="danger" plain size="small" :disabled="multiple"><el-icon><DeleteFilled /></el-icon>删除</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="50" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column prop="position" label="版位" width="180" />
                <el-table-column prop="frame" label="帧数" />
                <el-table-column prop="status" label="状态" >
                    <template #default="{row}">
                        <el-tag v-if="row.status === 0" :disable-transitions='true' type="success" size="small">待审核</el-tag>
                        <el-tag v-if="row.status === 1" :disable-transitions='true' type="danger" size="small">已审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="opinion" label="审核意见" width="180" />
                <el-table-column label="操作选项" width="180" >
                    <template #default="{row}">
                        <el-button link plain type="primary" size="small" @click="onEdit(row)"><el-icon><Edit /></el-icon>修改</el-button>
                        <el-button link plain type="primary" size="small" @click="onRevocation"><el-icon><Delete  /></el-icon>撤回</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
        <el-dialog
            v-model="addDialogVisible"
            :title="title"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="onReset(addRuleFormRef)"
            width="46%"
        >
            <el-form
                ref="addRuleFormRef"
                style="max-width: 700px"
                :model="addRuleForm"
                :rules="addRules"
                label-width="80"
                class="demo-ruleForm"
                status-icon
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="名称" prop="name" name="name" required>
                            <el-input v-model="addRuleForm.name" placeholder="请输入名称" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="版位" prop="position" name="position" >
                            <el-select v-model="addRuleForm.position" placeholder="请选择" clearable>
                                <el-option label="首页横幅" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="类型" prop="type" name="type" required >
                            <el-radio-group v-model="addRuleForm.type">
                                <el-radio :value=0>图片</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="广告类型" prop="adType" name="adType">
                            <el-radio-group v-model="addRuleForm.adType">
                                <el-radio :value=0>普通广告</el-radio>
                                <el-radio :value=1>默认广告</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="广告内容">
                                    <el-form-item label="图片地址" prop="content.pictureUrl" class="second_label" required name="pictureUrl" >
                                        <el-input v-model="addRuleForm.content.pictureUrl" placeholder="请输图片地址" clearable/>
                                    </el-form-item>
                                <el-form-item label="图片上传" prop="content.pictureUpload"  class="second_label">
                                    <el-upload
                                        v-model:file-list="addRuleForm.content.pictureUpload"
                                        class="upload-demo"
                                        action="#"
                                        multiple
                                        :auto-upload="false"
                                        :on-preview="handlePreview"
                                        :on-remove="handleRemove"
                                    >
                                        <template #trigger>
                                            <el-button type="primary" size="small">选择文件</el-button>
                                        </template>
                                        <el-button  style="margin-left:10px" size="small" type="success" @click="submitUpload">
                                            上传文件
                                        </el-button>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="链接地址" prop="content.linkUrl" class="second_label">
                                    <el-input v-model="addRuleForm.content.linkUrl" placeholder="请输链接地址" clearable/>
                                </el-form-item>
                                <el-form-item label="链接提示" prop="content.linkTip" class="second_label">
                                    <el-input v-model="addRuleForm.content.linkTip" placeholder="链接提示" clearable/>
                                </el-form-item>
                                <el-form-item label="链接目标" prop="content.linkTarget" class="second_label">
                                    <el-radio-group v-model="addRuleForm.content.linkTarget">
                                        <el-radio :value=0>新窗口</el-radio>
                                        <el-radio :value=1>原窗口</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="描述"  prop="description" name="description">
                    <el-input v-model="addRuleForm.description" type="textarea" placeholder="请输入描述" clearable/>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="onReset(addRuleFormRef)">重 置</el-button>
                <el-button type="primary" @click="onSubmit(addRuleFormRef)">提 交</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const ids = ref([])
const multiple = ref(true)
const selectable = (row) => ![1, 2].includes(row.id)
const addDialogVisible = ref(false)
const addRuleFormRef = ref()
const total = ref(50)
const title = ref('添加')
const selectWidth = ref('width:200px')
// 添加表单的内容
const addRuleForm = reactive({
    name: '',
    position: '',
    type: 0,
    adType: 0,
    content: {
        pictureUrl: '',
        pictureUpload: [],
        linkUrl: '',
        linkTip: '',
        linkTarget: ''
    },
    description: ''
})
// 搜索框
const searchForm = ref({
    position: '',
    status: ''
})
const tableData = [
    {
        id: '1161',
        name: '4',
        position: '首页横幅',
        frame: '第四帧',
        status: 0,
        opinion: ''
    },
    {
        id: '1124',
        name: '3',
        position: '首页横幅',
        frame: '第三帧',
        status: 1,
        opinion: ''
    }
]

// 校验规则
const addRules = reactive({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    position: [
        { required: true, message: '请选择版位', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'blur' }
    ],
    'content.pictureUrl': [
        { required: true, message: '请输入图片地址', trigger: 'blur' }
    ]
})
const queryParams = ref({
        pageNum: 1,
        pageSize: 10
})

const getList = () => {
    console.log('getList', queryParams.value)
}

// 搜索
const onSearch = () => {
    console.log('onSearch!')
}

// 增加
const onAdd = () => {
    title.value = '添加'
    addDialogVisible.value = true
}
// 修改
const onEdit = (row) => {
    title.value = '修改'
    addDialogVisible.value = true
}

// 删除
const onRevocation = () => {
    ElMessageBox.confirm(
    '您确定要删除这条数据吗？',
    '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(() => {
        ElMessage({
        type: 'success',
        message: 'Delete completed'
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除'
        })
    })
}
// 提交
const onSubmit = async(formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
        console.log('submit!')
        addDialogVisible.value = false
        } else {
        console.log('error submit!', fields)
        }
    })
}
// 重置
const onReset = (formEl) => {
    addRuleForm.value = {
        name: '',
        position: '',
        type: 0,
        adType: 0,
        content: {
            pictureUrl: '',
            pictureUpload: [],
            linkUrl: '',
            linkTip: '',
            linkTarget: ''
        },
        description: ''
    }
    formEl.resetFields()
}
// 文件预览
const handlePreview = (uploadFile) => {
    console.log('uploadFile', uploadFile)
}
// 文件删除
const handleRemove = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}
// 图片上传
const submitUpload = () => {
    console.log('submitUpload')
}
const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.date)
    multiple.value = !selection.length
}
</script>

<style lang="scss" scoped>

::v-deep{
    .el-table {
    .el-table__header-wrapper{
        th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item{
        .el-form-item__label {
            font-weight: bold !important;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item .second_label{
        .el-form-item__label {
            font-weight: normal !important;
            margin-top: 10px;
        }
    }
    }
}
::v-deep{
.second_label{
        .el-form-item__error {
            position: static !important
        }

    }
}

</style>
